<template>
	<view>
		<view class="" style="background-color: #fff" v-for="(item,index) in list">
			<view class="cover_box">
				<view class="cover" v-if="!item.url" @click="handleChooseVideo(item)">
					<text class="iconfont iconjia icon" style="font-size: 50rpx;"></text>
					<text class="text">点击添加视频</text>
				</view>
				<view class="video_box" v-if="item.url">
					<video :src="item.url" mode="aspectFill"></video>
					<view style="height: 100rpx;text-align: center;line-height: 100rpx;"
						@click="handleChooseVideo(item)">点击切换视频</view>
				</view>

			</view>
			<FormItem label="标题" v-if="!item.isEdit">
				<text>{{item.title}}</text>
			</FormItem>
			<FormItem label="标题" v-if="item.isEdit">
				<input type="text" placeholder="请输入作品标题" v-model.trim="item.title" />
			</FormItem>
			<FormItem label="简介" v-if="item.isEdit">
				<textarea placeholder="请输入简介" style="padding: 28rpx 0;" :maxlength="250" v-model.tirm="item.desc" />
			</FormItem>
			<view class="button" v-if="item.isEdit && item.id">
				<view class="" @click="handleDelete(item,index)">删除</view>
				<view class="pink" @click="handleUpdate(item,index)">更新</view>
				<view class="" @click="handleCancel(item)">取消</view>
			</view>
			<view class="button" v-if="item.url && !item.isEdit">
				<view @click="handleShowUpdate(item)">修改</view>
				<view class="" @click="handleDelete(item,index)">删除</view>
			</view>
			<view class="button" v-if="!isShowAddButton && !item.id">
				<view class="pink" @click="handleCreate(item,index)">完成</view>
				<view class="" @click="handleShowAdd">取消</view>
			</view>
		</view>

		<view class="addVideo" @click="handleAdd" v-if="isShowAddButton">
			+添加新的视频
		</view>

	</view>
</template>

<script>
	import FormItem from '@/components/common/form-item.vue'
	// #ifndef H5
	import VodUploader from '@/common/vod-wx-sdk-v2.js';
	// #endif
	export default {
		components: {
			FormItem,
		},
		data() {
			return {
				video_id: '',
				list: [],
				urlList: [],
				isShowAddButton: true
			}
		},
		methods: {
			updateList(item) {
				this.$H.post(`/video_detail/${item.id}`, item).then(res => {
					this.dataAssignment(res, item)
					uni.showToast({
						title: '更新成功'
					})
				})
			},
			handleUpdate(item, index) {
				this.formValidation(item)
				if (this.urlList[index] !== item.url) {
					this.$H.upload('/upload', {
						filePath: item.url
					}).then(res => {
						item.url = res.url
						this.updateList(item)
					})
				} else {
					this.updateList(item)
				}
			},
			handleCancel(item) {
				item.isEdit = false
			},
			handleDelete(item, index) {
				console.log(item)
				uni.showModal({
					title: '是否删除该视频',
					success: () => {
						this.$H.del(`/video_detail/${item.id}`).then(res => {
							if (res === 'ok') {
								this.list.splice(index, 1)
								console.log(this.list)
							}
						})
					}
				})
			},
			handleShowAdd() {
				this.isShowAddButton = true
				this.list.pop()
			},
			handleShowUpdate(item) {
				item.isEdit = true
			},

			formValidation(item) {
				if (item.title === '' && item.desc === '' && item.url === '') {
					return uni.showToast({
						title: '请完整填写视频信息',
						icon: error
					})
				}
				uni.showLoading({
					title: '发布中~'
				})
			},
			dataAssignment(res, item) {
				item.isEdit = false
				item = res
				item.isEdit = false
				console.log(item)
				uni.hideLoading()

			},
			handleCreate(item) {
				this.formValidation(item)
				this.$H.upload('/upload', {
					filePath: item.url
				}).then(res => {
					item.url = res.url
					this.$H.post('/video_detail', item).then(res => {
						this.isShowAddButton = true
						this.dataAssignment(res, item)
						uni.showToast({
							title: '发布成功'
						})
					})
				})
			},
			genID(length) {
				return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
			},
			handleChooseVideo(item) {
				uni.chooseVideo({
					count: 1,
					success: (res) => {
						item.url = res.tempFilePath;
					}
				})
			},
			handleAdd() {
				this.list.push({
					url: '',
					video_id: this.video_id,
					title: '',
					desc: '',
					isEdit: true
				})
				this.urlList.push('');
				this.isShowAddButton = false
			},
			getList() {
				this.$H.get(`/video_detail/${this.video_id}`, this.$params).then(res => {
					if (res.length > 0) {
						this.list = res.map(i => {
							i.isEdit = false
						})
						res.forEach((i, n) => {
							this.urlList[n] = i.url
						})
					}
					this.list = res
					console.log(this.list)
				})
			}
		},
		computed: {
			isShowAddbutton() {
				return this.list.every(i => !i.isEdit)
			}
		},
		onLoad(e) {
			this.video_id = e.video_id;
			this.getList()
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9fafb;
	}

	.cover_box {
		.cover {
			height: 350rpx;
			background-color: #f9fafb;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.video_box {
			position: relative;

			video {
				width: 100vw;
				height: 350rpx;
			}

			.text {
				color: #6c757d;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.span_box {
		position: relative;

		.span {
			font-size: 24rpx;
			position: absolute;
			bottom: 4rpx;
			right: 30rpx;
			color: #808080;
		}
	}

	.button {
		display: flex;
		height: 100rpx;
		background-color: #fff;

		view {
			flex: 1;
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
		}

		.pink {
			color: #fff;
			background-color: #FB7299;
		}

	}

	.addVideo {
		margin: 60rpx 40rpx 0;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background-color: #FB7299;
		border-radius: 50rpx;
	}
</style>
